<template>  
  <div class="emoji-picker-wrapper">  
    <!-- 触发展开面板的按钮 -->  

	
	<img class="emoji-picker-btn" @click="showEmojiPanel = !showEmojiPanel" :src="require('@/assets/icons/表情.png')">
  
    <!-- 表情面板 -->  
    <div class="emoji-panel" v-if="showEmojiPanel" @click.self="showEmojiPanel = false">  
      <div class="emoji-container">  
        <!-- 表情按钮列表 -->  
        <button  
          class="emoji-btn"  
          v-for="emoji in emojis"  
          :key="emoji"  
          @click="insertEmoji(emoji)"  
        >
          {{ emoji }}  
        </button>  
      </div>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      showEmojiPanel: false, // 控制表情面板的显示与隐藏  
      emojis: [  
        '😊', '😃', '😍', '😉', '😜', '😇', '🙃', '😏',  
        '😌', '😁', '😣', '😖', '😢', '😭', '😠', '😡', 
        // 添加更多Emoji...  
      ],  
    };  
  },  
  methods: {  
    insertEmoji(emoji) {  
      // 触发一个自定义事件，将选中的Emoji传递给父组件  
      this.$emit('select', emoji);  
      // 关闭表情面板  
      this.showEmojiPanel = false;  
    },  
  },  
};  
</script>  
  
<style scoped>  
.emoji-picker-wrapper {  
  position: relative;  
  display: inline-block;  
}  
  
.emoji-picker-btn {  
  width: 38px;
  height: 38px;
  line-height: 32px;
  vertical-align: middle;
  padding: 1vw;
}  
  
.emoji-panel {  
  position: absolute;  
  bottom: 130%;  
  left: -46vw;  
  right: 0;  
  background-color: #fff;  
  border: 1px solid #ddd;  
  padding: 10px;  
  z-index: 2;
  width: 50vw;
  border-radius: 10px;
}  
  
.emoji-container {  
  display: flex;  
  justify-content: space-around;
  align-items: center;
  width: 50vw;
  flex-wrap: wrap;
  background-color: #fff;
}  
  
.emoji-btn {  
  padding: 5px 10px;  
  margin: 5px;  
  border: none;  
  background-color: #f5f5f5;  
  cursor: pointer;  
  font-size: 1.5em;
}
  
.emoji-btn:hover {  
  background-color: #e0e0e0;  
}  
</style>